<template>
    <div class="goodsItem" @click="$router.push(`/prodetail/${goodsList.goods_id}`)">
        <img :src="goodsList.goods_image" alt="">
        <div class="text">
            <div class="mainText">{{ goodsList.goods_name }}</div>
            <div class="navText">已售{{goodsList.goods_sales}}件</div>
            <div class="price">
                <div class="newPrice">￥{{goodsList.goods_price_max
                }}</div>
                <div class="oldPrice">￥{{goodsList.line_price_max}}</div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  name: 'GoodsItem',
  data () {
    return {

    }
  },
  props: [
    'goodsList'
  ],
  methods: {
  }
}
</script>

<style lang="less" scoped>
    .goodsItem{
        height: 130px;
        padding: 5px 10px ;
        // padding-top: 8px;
        // padding-bottom: 8px;
        // padding-left: 10px;
        // padding-right: 10px;
        border-bottom:6px solid #f6f6f5 ;
        img{
            float: left;
            height: 100%;
        }
        .text{
            float: right;
            text-align: left;
            margin-top: 10px;
            width: 215px;
            height: 45px;
            // margin-left: 10px;
            .mainText{
                font-size: 16px;
            //设置超出文本显示省略号
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            -webkit-line-clamp: 2; /* 限制显示的行数 */
            }
            .navText{
            width: 100%;
            float: left;
            margin-top: 5px;
            font-size: 12px;
            color: #9a9b99;
            }
            .price{
                float: left;
                margin-top: 7px;
                width: 100%;
                .newPrice{
                    float: left;
                    color: red;
                }
                .oldPrice{
                    float: left;
                    margin-left: 5px;
                    margin-top:2px;
                    text-decoration: line-through;
                    font-size: 12px;
                    color: #9a9b99;
                }
            }
        }

    }
</style>
